import { ref } from "vue";
import { debounce } from "@/utils";

const vh = ref(document.documentElement.clientHeight);
const vw = ref(document.documentElement.clientWidth);

window.addEventListener("resize", debounce(handleResize, 300));

function handleResize() {
  vh.value = document.documentElement.clientHeight;
  vw.value = document.documentElement.clientWidth;
}

export default function useViewport() {
  return {
    vh,
    vw,
  };
}
